<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <style>
        #block {
            height: 200px;
            background-color: #f1f1f0;
        }
        table{
            border-collapse:collapse;
        }
        tr{
            border: 1px solid #efefef;
        }
        thead {
            background-color: #333;
        }
        thead th {
            vertical-align: bottom;
            background-color: #9c9c9c;
        }
    </style>
    <div id="block"></div>
    <table class="table">
        <thead>
            <tr>
                <th>title</th>
                <th>title</th>
                <th>title</th>
                <th>title</th>
                <th>titlelonglonglong longlonglonglong</th>
                <th>title</th>
                <th>title</th>
                <th>titlelonglonglonglong longlonglonglonglong</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>
<script>
    var tbody = document.getElementsByTagName('tbody')[0]
    var html = ''
    for(var i = 0; i< 50; i++){
        html += '<tr><th>value</th><th>value</th><th>value</th><th>value</th><th>value</th><th>value</th><th>value</th><th>value</th></tr>'
    }
    tbody.innerHTML = html
</script>
<script src="./eleFixed.min.js"></script>
<script>
    // add an instance
    eleFixed.push({
        target: document.getElementsByTagName('thead')[0], // it must be a HTMLElement
        offsetTop: 210 // height from window offsetTop
    })
    
    // delete one instance
    // eleFixed.delete(document.getElementsByTagName('thead')[0])
    
    // destory eleFixed
    // eleFixed.destory()
</script>

</html>